<ui:component xmlns="http://www.w3.org/1999/xhtml"
              xmlns:f="http://java.sun.com/jsf/core"
              xmlns:h="http://java.sun.com/jsf/html"
              xmlns:c="http://java.sun.com/jsp/jstl/core"
              xmlns:a4j="http://richfaces.org/a4j"
              xmlns:rich="http://richfaces.ajax4jsf.org/rich"
              xmlns:ui="http://java.sun.com/jsf/facelets">

    <!--@elvariable id="id" type="java.lang.String"-->
    <!--@elvariable id="value" type="java.lang.String"-->
     <!--@elvariable id="altText" type="java.lang.String"-->
    <!--@elvariable id="style" type="java.lang.String"-->
    <!--@elvariable id="styleClass" type="java.lang.String"-->
    <!--@elvariable id="jsSave" type="java.lang.String"-->
    <!--@elvariable id="jsCancel" type="java.lang.String"-->
     <!--@elvariable id="bodyClass" type="java.lang.String"-->
    <f:subview id="#{id}">
        <h:panelGroup layout="block" style="#{style}" styleClass="#{styleClass}">
            <style type="text/css">
              .padding0{
                  padding:0;
              }
            </style>


            <rich:panel id="displayDiv" onclick="
            {
                this.style.display='none';
                #{rich:element('editDiv')}.style.display='block';
                #{rich:element('savedText')}.value = #{rich:element('editArea')}.value;
            }"
                    bodyClass="#{bodyClass}"
                    style="height:auto; overflow:auto">
                <h:outputText rendered="#{not empty value}" value="#{value}"/>
                <a4j:commandLink rendered="#{empty value}" style="padding:3px;" value="#{altText}"/>
            </rich:panel>

            <rich:panel id="editDiv" style="display:none; border: none" bodyClass="padding0">
                <h:inputTextarea
                        id="editArea" value="#{value}"
                        style="width:100%;"/>

                <h:panelGroup layout="block" style="text-align:right;margin-top:-0.5cm;">
                    <a4j:commandButton style="background-color:#ECF4FE;border:solid;border-width:1px;"
                                       image="/style/images/inplaceSave.png"
                                       value="save"
                                       reRender="#{rich:clientId('displayDiv')},#{rich:clientId('savedText')},#{rich:clientId('textError')}"
                                       oncomplete="
                                         {
                                         if(#{rich:element('textError')}.hasChildNodes())
                                            {
                                                #{rich:element('displayDiv')}.style.display='none';
                                                return;
                                            }
                                        #{rich:element('displayDiv')}.style.display='block';
                                        #{rich:element('editDiv')}.style.display='none';

                                        #{jsSave}
                                         }"/>
                    <h:graphicImage
                            onclick="
                            {
                                #{rich:element('editArea')}.value = #{rich:element('savedText')}.value;
                                #{rich:element('displayDiv')}.style.display='block';
                                #{rich:element('editDiv')}.style.display='none';
                                var errorNode = #{rich:element('textError')};
                                if(errorNode.hasChildNodes())
                                    while (errorNode.childNodes.length >= 1)
                                        errorNode.removeChild(errorNode.firstChild);

                                #{jsCancel};
                                return false;
                            }"
                            url="/style/images/inplaceCancel.png"
                            alt="cancel"
                            style="background-color:#ECF4FE;margin:0px;padding:0px;border:solid;border-width:1px;cursor:pointer;"/>
                </h:panelGroup>
                <h:panelGroup layout="block" id="textError">
                    <h:message for="#{id}:editArea" style="color: red;"/>
                </h:panelGroup>
                <h:panelGroup layout="block" style="clear:both;"/>
            </rich:panel>

            <!--Temp Value-->
            <h:inputTextarea id="savedText"
                             style="display:none;"
                             disabled="true"/>
        </h:panelGroup>
    </f:subview>
</ui:component>